<template>
	<view>
		<view class="cu-bar bg-white" :class="isCard?'margin-top':''">
			<view class="action" style="font-size: 16px;">
				<text v-if="showTitleIcon" class="title-Icon" ></text> 
				<text v-if="required" class="padding-left-xs">*</text>
				<text class="margin-left">{{title}}</text>
				<text v-if="showEditIcon" class="cuIcon-writefill padding-left-xs text-brown" style="font-size: 16px;"></text>
			</view>
			<view class="action">
				<slot name="extra"></slot>
			</view>
			<button v-if="showButton" class="om-font-size-xs om-btn-color" style="line-height:32px; height:32px; margin-right: 0;margin: 5px 0;color: #FFFFFF;width: 25%;font-size: 14px" @click="goto">{{buttonText}}</button>
		</view>
		<view v-if="subTitle" class="solid-bottom margin-left-xl">
			<text class="om-font-size-sm" style="font-style: italic; color: darkorange;">
				{{subTitle}}
			</text>
		</view>
		<view class="cu-card dynamic padding-top-xs" :class="isCard?'no-card':''">
			<view class="cu-item shadow">
				<slot />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			showTitleIcon:{
				type:Boolean,
				default:true
			},
			isCard:{
				type:Boolean,
				default:false
			},
			title:{
				type:String,
				default:""
			},
			subTitle:{
				type:String,
				default:""
			},
			required:{
				type:Boolean,
				default:false
			},
			showEditIcon:{
				type:Boolean,
				default:false
			},
			showButton:{
				type:Boolean,
				default:false
			},
			buttonLink:{
				type:String,
				default:""
			},
			buttonText:{
				type:String,
				default:""
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			goto(link){
				let _that = this
				_that.$emit('buttonLink')
			}
		}
	}
</script>

<style>
.cu-bar .action:first-child{
	margin-left: 0;
}
.action:nth-child(2){
	margin-right: 0;
}
.cu-card>.cu-item{
	margin: 0;
}
.title-Icon{
	width: 6px;
	height: 18px;
	border-radius: 3px;
	margin-left: 3px;
	background-color: #39B54A;
}
.subTitle-font-size{
	font-size: 14px;
}
</style>
